.TopNavBar {
  -webkit-app-region: no-drag;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  font-family: 'RobotoCondensed-Bold';
  border-bottom: solid 1px var(--app-navbar-background);

  .Main {
    width: 100vw;
    display: flex;
    flex-direction: row;
    background-color: var(--app-navbar-background);

    svg {
      stroke: var(--app-navbar-icon-color);
      fill: var(--app-navbar-icon-color);
    }
  }

  .Menu {
    display: flex;
    flex-direction: row;
    font-size: calc(.65rem + 0.5vw);
    a {
      padding: .5rem;
      margin: .3rem;
      color: var(--app-navbar-text);
      cursor: pointer;
      text-decoration: none;
      position: relative;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      font-size: 0.89em;
      line-height: 0.89em;
      transition: all .25s;

      > div {
        margin-right: .5em;
      }

      svg {
        width: 36px;
        height: 36px;
        stroke: var(--app-navbar-icon-color);
        margin-right: 0.5em;
      }

      &.Active {
        color: var(--primary-color);

        svg {
          stroke: var(--primary-color) !important;
        }

        use > symbol > * {
          stroke: var(--primary-color) !important;
        }
      }

      &:hover {
        color: white;

        svg {
          stroke: white;
          cursor: pointer;
        }
      }
    }
  }

  .NotificationAndSearchBar {
    display: flex;
    justify-content: flex-end;
    flex-grow: 1;
    align-items: center;
    position: relative;
    margin-right: 1rem;

    input {
      right: 0;
      position:relative;
      justify-content: flex-end;
      outline: none;
      border: 1px solid var(--app-navbar-icon-color);
      border-radius: 24px;
      padding: 11px .75rem 10px .75rem;
      color: #fff;
      font-size: .7rem;
      line-height: 1;
      padding-right: 1.8rem;
      font-family: "Fira Code Regular";
      width:100%;
      max-width:374px;
      min-width: 80px;
      transition: none;
      background: var(--app-navbar-background);
      &:focus {
        min-width: 374px;
        position: absolute;
        
      transition: all .25s;
      }

      &::-webkit-input-placeholder {
        color: var(--app-navbar-icon-color);
      }

      &:focus {
        border-color: #fff;
        color: #fff;
      }
    }

    > svg {
      position: absolute;
      right: 16px;
      height: 16px;
      width: 16px;
      color: var(--app-navbar-icon-color);
    }
  }

  .StatusAndControls {
    width: 100vw;
    height: 56px;
    color: var(--app-statusbar-text);
    background-color: var(--app-statusbar-background);
    display: flex;
    flex-direction: row;
  }

  .Status {
    display: flex;
    flex: 1;
  }

  .Actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 55px;

    button {
      margin-right: 1rem;
      padding: 0 .8rem;
      display: flex;
      align-items: center;
      -webkit-app-region: no-drag;

      &:active {
        transform: scale(.98);
      }

      &:hover {
        color: var(--app-button-primary-background-color);
        background: var(--app-statusbar-btn-text);
      }

      > div {
        margin-right: .5rem;
      }

      .settingsIconWrapper {
        width: 18px;
        margin: 6px 0 0;
      }

      svg > * {
        stroke: currentColor !important;
        fill: currentColor !important;
      }
    }
  }

  .StopMining {
    stroke-width: 1;
  }
}
